<template>
  <div class="app">
    <div>
      <itemBox title="生机比后五学校">
        <table-scroll-pro
          :data="tableDataA"
          :columns="columnsA"
          :class-option="classOption"
          :config="tablConfig"
        ></table-scroll-pro>
      </itemBox>
    </div>
    <div style="margin-top: 24px">
      <itemBox title="护眼装备灯对比" class="mt24">
        <div class="rightBottom" v-for="item in eyeProtectionList">
          <div class="rightBottom_top">
            <div class="schoolLevel">{{item.schoolLevel}}</div>
            <div class="num">{{ item.num }}</div>
          </div>
          <div class="rightBottom_bottom">
            <div
              class="ccc"
              :style="{
                width: item.width + '%',
              }"
            ></div>
            <div class="ccc2"></div>
          </div>
        </div>
      </itemBox>
    </div>
  </div>
</template>

<script>
import drawMixin from "@/utils/drawMixin";
import countTo from "vue-count-to";
import pageTitle from "../../components/pageTitle";
import itemBox from "@/views/components/itemBox";
import subTit from "../../components/subTit";
import scroll from "@/views/food/components/tableScroll/index.vue";
let mixin = new drawMixin();

export default {
  name: "index",
  components: { countTo, pageTitle, itemBox, subTit, scroll },
  mixins: [mixin],
  data() {
    return {
      columnsA: [
        { label: "序号", prop: "rank", align: "center" },
        {
          label: "学校",
          prop: "school",
          align: "center",
          width: 100,
          showOverflowTooltip: true,
        },
        { label: "学生数(人)", prop: "peopleNum", align: "center" },
        { label: "计算机数(台)", prop: "computerNum", align: "center" },
        { label: "生机比", prop: "ratio", align: "center" },
      ],
      tableDataA: [
        {
          rank: "01",
          school: `东阳市第二实验小学`,
          peopleNum: "3405",
          computerNum: "3600",
          ratio: "1.05:1",
        },
        {
          rank: "02",
          school: `东阳市外国语学校`,
          peopleNum: "2581",
          computerNum: "2658",
          ratio: "1.03:1",
        },
        {
          rank: "03",
          school: `东阳中学`,
          peopleNum: "2164",
          computerNum: "2228",
          ratio: "1.03:1",
        },
        {
          rank: "04",
          school: `江北中学小学`,
          peopleNum: "1994",
          computerNum: "2033",
          ratio: "1.02:1",
        },
        {
          rank: "05",
          school: `吴宁一小`,
          peopleNum: "1931",
          computerNum: "1950",
          ratio: "1.01:1",
        },
      ],
      classOption: {
        limitMoveNum: 4,
        singleHeight: 62, // 单步运动停止的高度(默认值0是无缝不停止的滚动)
        waitTime: 2000, // 单步停止等待时间(默认值1000ms)
      },
      tablConfig: {
        rowHeight: 60 + "px",
        headerHeight: 70 + "px",
      },
      eyeProtectionList: [
        {
          schoolLevel: "幼儿园",
          num: "1/3",
          width: 40,
        },
        {
          schoolLevel: "小学",
          num: "1/4",
          width: 70,
        },
        {
          schoolLevel: "初中",
          num: "1/4",
          width: 66,
        },
        {
          schoolLevel: "高中",
          num: "1/6",
          width: 36,
        },
        {
          schoolLevel: "中职",
          num: "20/1",
          width: 35,
        },
        {
          schoolLevel: "其他",
          num: "1/6",
          width: 40,
        },
      ],
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
.app {
  width: 100%;
  height: 100%;
  .rightBottom {
    margin: 2px 0 26px;
    .rightBottom_top {
      display: flex;
      .schoolLevel {
        font-size: 16px;
        color: #ffffff;
        font-weight: 400;
        margin-bottom: 12px;
      }
      .num {
        margin-left: auto;
        font-size: 20px;
        color: #00fffa;
        font-weight: 500;
      }
    }
    .rightBottom_bottom {
      display: flex;
      width: 436px;
      height: 6px;
      background: rgba(0, 113, 255, 0.4);
      transform: skewx(-45deg);
      .ccc {
        width: 236px;
        height: 6px;
        background: #0071ff;
        transform: skewx(-10deg);
      }
      .ccc2 {
        width: 4px;
        height: 6px;
        background: #fff;
        transform: skewx(-10deg);
      }
    }
  }
}
</style>
